<template>
    <div class="cate">
        <van-nav-bar title="商品分类" fixed placeholder />
        <template v-if="cateList.length">
            <van-sidebar v-model="activeKey" @change="onChange" v-if="cateList.length">
                <van-sidebar-item :title="item.title" v-for="item of cateList" :key="item.id" />
            </van-sidebar>
            <div class="cate-cont">
                <h2>{{activeTitle}}</h2>

                <van-grid center :column-num="3" :gutter="10" icon-size="55">
                    <van-grid-item
                        v-for="item in cate_cont"
                        :key="item.id"
                        :icon="item.gimg"
                        :text="item.gname"
                        :to="{name:'info',params:{id:item.id}}"
                    />
                </van-grid>
            </div>
        </template>
        <van-skeleton title :row="5" v-else />
    </div>
</template>

<script>
import axios from "../../plugins/axios";
import { A_CATE_LIST, A_CATE_GOOD } from "../../store/types";
import { mapActions, mapState } from "vuex";
export default {
    name: "",
    data() {
        return {
            activeKey: 0,
            activeTitle: "",
            bl: false
        };
    },
    props: {},
    async mounted() {
        // console.log("activated");
        // let res = await axios("/api/cate");
        // this.cates = res.data.data;
        await this[A_CATE_LIST]({ type: "cate" });
        // console.log(this.cateList)
        // this[A_CATE_GOOD]({type: 'goods',params:{gcate_id: this.cateList[0].id}})
        // this.onChange(0);cateList
        this.onChange(0)
    },
    methods: {
        ...mapActions("cate", [A_CATE_LIST, A_CATE_GOOD]),
        onChange(index) {
            this.activeTitle = this.cateList[index].title;
            this.$store.dispatch("cate/" + A_CATE_GOOD, {
                type: "goods",
                params: { gcate_id: this.cateList[index].id }
            });
            // this.$axios({
            //     url: "/api/goods",
            //     params: {
            //         gcate_id: this.cates[index].id
            //     }
            // }).then(res => {
            //     this.cate_cont = res.data.data;
            // });
        }
    },
    computed: {
        ...mapState("cate", ["cateList", "cate_cont"])
    }
    // async beforeRouteEnter(to, from, next) {
    //     let res = await axios("/api/cate");
    //     to.query.cate = res.data.data;
    //     next();
    // }
};
</script>

<style scoped>
div {
    box-sizing: border-box;
}
.cate {
    margin-bottom: 50px;
}
.van-sidebar-item {
    padding: 15px 12px;
}
.cate-cont {
    position: absolute;
    top: 46px;
    left: 80px;
    right: 0;
}
.cate-cont > h2 {
    font-size: 16px;
    padding-left: 10px;
}
.cate-cont-list {
    width: 33.3%;
    height: 50px;
    background: chartreuse;
}
</style>
